<section id="radio-group"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Radio Group</h2>
    <a href="/components/radio-group" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4">
    <div class="flex flex-col gap-y-6">
      <fieldset class="grid gap-3">
        <label class="label"><input type="radio" name="demo-radio-group" value="default" class="input">Default</label>
        <label class="label"><input type="radio" name="demo-radio-group" value="comfortable" class="input">Comfortable</label>
        <label class="label"><input type="radio" name="demo-radio-group" value="compact" class="input">Compact</label>
      </fieldset>
      <fieldset class="grid gap-3 max-w-sm">
        <label class="label gap-3 items-start hover:bg-accent/50 rounded-lg border p-4 has-[input[type='radio']:checked]:border-green-600 has-[input[type='radio']:checked]:bg-green-50 dark:has-[input[type='radio']:checked]:border-green-900 dark:has-[input[type='radio']:checked]:bg-green-950">
          <input type="radio" name="demo-radio-group-styled" value="no" class="input checked:bg-green-600 checked:border-green-600 dark:checked:bg-input/30 checked:before:bg-background dark:checked:before:bg-primary">
          <div class="grid gap-1 font-normal">
            <h2 class="font-medium">Starter Plan</h2>
            <p class="text-muted-foreground leading-snug">Perfect for small businesses getting started with our platform</p>
          </div>
        </label>
        <label class="label gap-3 items-start hover:bg-accent/50 rounded-lg border p-4 has-[input[type='radio']:checked]:border-green-600 has-[input[type='radio']:checked]:bg-green-50 dark:has-[input[type='radio']:checked]:border-green-900 dark:has-[input[type='radio']:checked]:bg-green-950">
          <input type="radio" name="demo-radio-group-styled" value="no" class="input checked:bg-green-600 checked:border-green-600 dark:checked:bg-input/30 checked:before:bg-background dark:checked:before:bg-primary">
          <div class="grid gap-1 font-normal">
            <h2 class="font-medium">Pro Plan</h2>
            <p class="text-muted-foreground leading-snug">Advanced features for growing businesses with higher demands</p>
          </div>
        </label>
      </fieldset>
    </div>
  </div>
</section>